<div class="container page-container" id="event-calendar" style="overflow: auto">
    <div class="page-header">
        <h2><span class="glyphicon glyphicon-glass"></span>Event</h2>
    </div>
    <div class="row" style="padding-left: 1em;padding-bottom: 1em;">
        <ul class="list-group col-md-2 col-sm-2">
            <?php
            $eve = explode('-', $this->session->userdata('eve_priv'));
            echo '<a class="list-group-item active"><span class="glyphicon glyphicon-calendar"></span> Events Calendar</a>';
            echo '<a href="" class="list-group-item"><span class="glyphicon glyphicon-list-alt"></span> Events List</a>';
            if ($eve[0] == 0) {
                echo '<a href="' . site_url() . 'events/create-event" class="list-group-item"><span class="glyphicon glyphicon-plus"></span> Create Event</a>';
            }
            ?>
        </ul>
        <div class="event-calendar col-md-10 col-sm-10">
            <div class="table-responsive">
                <?php echo $calendar ?>
            </div>
        </div>
    </div>
    <!--View Event Modal-->
    <div class="modal fade" id="view-event-calendar-popup" tabindex="-1" role="dialog" aria-labelledby="view-event-title" aria-hidden="true">
        <div class="modal-dialog view-event-modal-container">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="view-event-title"></h4>
                </div>
                <div id="modal-event-calendar"  class="modal-body">
                    <input type="hidden" id="event-id" />
                    <!--a class="dropdown-toggle btn btn-primary" data-toggle="bbem-even-menu" href="#">Dropdown <span class="caret"></span></a-->
                    <ul class="nav nav-tabs" id="view-event-nav">
                        <li class="view-event-details-nav active"><a href="#view-event-details-tab" data-toggle="tab">Event Detail</a></li>
                        <li class="view-event-supplier-nav"><a href="#view-event-supplier-tab" data-toggle="tab">Event Supplier</a></li>
                        <li class="view-event-checklist-nav"><a href="#view-event-checklist-tab" data-toggle="tab">Checklist</a></li>
                        <li class="view-event-task-nav"><a href="#view-task-tab" data-toggle="tab">Task</a></li>
                        <li class="venue-nav"><a href="#venue-tab" data-toggle="tab">Venue Layout</a></li>
                        <li class="schedule-nav"><a href="#schedule-tab" data-toggle="tab">Production Schedule</a></li>
                        <li class="gantt-nav"><a href="#gantt-chart-tab" data-toggle="tab">Gantt Chart</a></li>
                        <li class="expenses-nav"><a href="#expenses-tab" data-toggle="tab">Expense</a></li>
                        <li class="voucher-nav"><a href="#voucher-tab" data-toggle="tab">Cash Voucher</a></li>
                        <li class="cal-guest-nav"><a href="#guest-tab" data-toggle="tab">Guest</a></li>
                    </ul>
                    <div class="tab-content view-event-container">
                        <!--Event Details-->
                        <div class="tab-pane active" id="view-event-details-tab">
                            <?php if ($eve[2] == 0) { ?>
                                <button class="btn btn-default btn-edit-event-details" style="margin-bottom:1em;"><span class="glyphicon glyphicon-edit"></span> Edit</button>
                                <hr style="margin-top:0">
                            <?php } ?>
                            <div class="view-event-details-container">
                                <div class="col-md-6">
                                    <div class="row">
                                        <label class="col-md-4">Event Name</label>
                                        <div class="col-md-8">
                                            <span class="event-name"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">Event Type</label>
                                        <div class="col-md-8">
                                            <span class="event-type"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">Event Budget</label>
                                        <div class="col-md-8">
                                            <span class="event-budget"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">Event Client</label>
                                        <div class="col-md-8">
                                            <span class="event-client"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">Start Date</label>
                                        <div class="col-md-8">
                                            <span class="start-date"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">End Date</label>
                                        <div class="col-md-8">
                                            <span class="end-date"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">Event Actual Date</label>
                                        <div class="col-md-8">
                                            <span class="actual-date"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">Event Location</label>
                                        <div class="col-md-8">
                                            <span class="event-loc"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">Event Coordinator</label>
                                        <div class="col-md-8">
                                            <span class="event-coord"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-md-4">Event Notes</label>
                                        <div class="col-md-8">
                                            <span class="event-notes"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="actual-event-date">
                                        <strong class="a-d-month"></strong>
                                        <span class="a-d-day"></span>
                                        <em class="a-d-yr"></em>
                                    </div>
                                </div>
                            </div>
                            <?php if ($eve[2] == 0) { ?>
                                <div class="edit-event-details-container hide">
                                    <div class="panel panel-primary new-e-t-container hide">
                                        <div class="panel-heading">New Event Type</div>
                                        <div class="panel-body">
                                            <form id="e-t-form" method="post">
                                                <div class="row">
                                                    <label for="n-venue-name" class="col-sm-3 col-md-2 control-label">Type Name</label>
                                                    <div class="col-sm-9 col-md-10">
                                                        <input type="text" class="form-control event-type-name" name="event_type_name">
                                                    </div>
                                                </div>
                                                <div class="pull-right margin-top">
                                                    <button type="button" class="btn btn-default btn-cancel">Cancel</button>
                                                    <input type="submit" role="button" class="btn btn-primary btn-save" value="Save" />
                                                </div>
                                                <div class="clearfix"></div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary new-e-c-container hide">
                                        <div class="panel-heading">New Client</div>
                                        <div class="panel-body">
                                            <form id="client-form" class="client-form" method="post">
                                                <div class="row">
                                                    <div class="form-group col-sm-6">
                                                        <label for="n-lname" class="control-label">Last Name</label>
                                                        <input type="text" name="lname" class="form-control lname"/>
                                                    </div>
                                                    <div class="form-group col-sm-6">
                                                        <label for="n-fname" class="control-label">First Name</label>
                                                        <input type="text" name="fname" class="form-control fname"/>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-12 address-container">
                                                        <label for="n-address" class="control-label">Address</label>
                                                        <input type="text" class="form-control address-text address-1" name="address_1"/>
                                                        <input type="text" class="form-control address-text address-2" name="address_2"/>
                                                        <input type="text" class="form-control address-text address-3" name="address_3"/>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-12 email-container">
                                                        <label for="n-email" class="control-label">Email Address</label>
                                                        <input type="text" class="form-control email-text email-1" name="email_1"/>
                                                        <input type="text" class="form-control email-text email-2" name="email_2"/>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-12 contact-no-container">
                                                        <label for="n-contact-no" class="control-label">Contact No.</label>
                                                        <input type="text" class="form-control contact-no-text contact-no-1" name="contact_no_1"/>
                                                        <input type="text" class="form-control contact-no-text contact-no-2" name="contact_no_2"/>
                                                        <input type="text" class="form-control contact-no-text contact-no-3" name="contact_no_3"/>
                                                    </div>
                                                </div>
                                                <div class="pull-right margin-top">
                                                    <button type="button" class="btn btn-default btn-cancel">Cancel</button>
                                                    <input type="submit" class="btn btn-primary btn-save" value="Save" />
                                                </div>
                                                <div class="clearfix"></div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary new-e-v-container hide">
                                        <div class="panel-heading">New Event Venue</div>
                                        <div class="panel-body">
                                            <form id="venue-form" method="post">
                                                <div class="row">
                                                    <label for="n-venue-name" class="col-sm-2 col-md-2 control-label">Venue Name</label>
                                                    <div class="col-sm-10 col-md-10">
                                                        <input type="text" class="form-control venue-name" name="venue_name">
                                                    </div>
                                                </div>
                                                <div class="row margin-top">
                                                    <label for="venue-address" class="col-sm-2 col-md-2 control-label">Venue Address</label>
                                                    <div class="col-sm-10 col-md-10">
                                                        <input type="text" class="form-control venue-address" name="venue_address">
                                                    </div>
                                                </div>
                                                <div class="pull-right margin-top">
                                                    <button type="button" class="btn btn-default btn-cancel">Cancel</button>
                                                    <input type="submit" class="btn btn-primary btn-save" value="Save" />
                                                </div>
                                                <div class="clearfix"></div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary new-e-e-container hide">
                                        <div class="panel-heading">New Coordinator</div>
                                        <div class="panel-body">
                                            <form id="emp-form" class="emp-form" method="post">
                                                <div class="row">
                                                    <div class="form-group col-sm-6">
                                                        <label for="n-lname" class="control-label">Last Name</label>
                                                        <input type="text" name="lname" class="form-control lname" />
                                                    </div>
                                                    <div class="form-group col-sm-6">
                                                        <label for="n-fname" class="control-label">First Name</label>
                                                        <input type="text" name="fname" class="form-control fname" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="form-group col-sm-6">
                                                        <label for="n-mname" class="control-label">Middle Name</label>
                                                        <input type="text" name="mname" class="form-control mname" />
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <label>Gender</label><br/>
                                                        <div class="btn-group gender" data-toggle="buttons">
                                                            <label class="btn btn-default active">
                                                                <input type="radio" name="gender" value="0" checked>Male
                                                            </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="gender" value="1">Female
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="form-group col-sm-6">
                                                        <label for="n-bday" class="control-label">Birthday</label>
                                                        <div class="form-inline bday">
                                                            <div class="form-group">
                                                                <select class="form-control bday-month required select" name="bday_month">
                                                                    <option class="default-month" value="">Month</option>
                                                                    <?php
                                                                    $month = "<option val=1>Jan</option>
                                                                        <option val=2>Feb</option>
                                                                        <option val=3>Mar</option>
                                                                        <option val=4>Apr</option>
                                                                        <option val=5>May</option>
                                                                        <option val=6>Jun</option>
                                                                        <option val=7>Jul</option>
                                                                        <option val=8>Aug</option>
                                                                        <option val=9>Sep</option>
                                                                        <option val=10>Oct</option>
                                                                        <option val=11>Nov</option>
                                                                        <option val=112>Dec</option>";
                                                                    echo $month;
                                                                    ?>
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <select class="form-control bday-day required select" name="bday_day">
                                                                    <option class="default-day" value="">Day</option>
                                                                    <?php
                                                                    $day = 1;
                                                                    while ($day != 32) {
                                                                        ?>
                                                                        <option value="<?php echo $day ?>"><?php echo $day ?></option>
                                                                        <?php
                                                                        $day++;
                                                                    }
                                                                    ?>
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <select class="form-control bday-year required select" name="bday_year">
                                                                    <option class="default-year" value="">Year</option>
                                                                    <?php
                                                                    $year = date('Y');
                                                                    while ($year != 1850) {
                                                                        ?>
                                                                        <option value="<?php echo $year ?>"><?php echo $year ?></option>
                                                                        <?php
                                                                        $year--;
                                                                    }
                                                                    ?>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-sm-6">
                                                        <label for="n-date-emp" class="control-label">Date Employed</label>
                                                        <input type="date" name="date_emp" class="form-control date-emp" placeholder="yyyy-mm-dd" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-12 address-container">
                                                        <label for="n-address" class="control-label">Address</label>
                                                        <input type="text" class="form-control address-text address-1" name="address_1">
                                                        <input type="text" class="form-control address-text address-2" name="address_2">
                                                        <input type="text" class="form-control address-text address-3" name="address_3">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-12 email-container">
                                                        <label for="n-email" class="control-label">Email Address</label>
                                                        <input type="text" class="form-control email-text email-1" name="email_1">
                                                        <input type="text" class="form-control email-text email-2" name="email_2">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-12 contact-no-container">
                                                        <label for="n-contact-no" class="control-label">Contact No.</label>
                                                        <input type="text" class="form-control contact-no-text contact-1" name="contact_no_1">
                                                        <input type="text" class="form-control contact-no-text contact-2" name="contact_no_2">
                                                        <input type="text" class="form-control contact-no-text contact-3" name="contact_no_3">
                                                    </div>
                                                </div>
                                                <div class="pull-right margin-top">
                                                    <button type="button" class="btn btn-default btn-cancel">Cancel</button>
                                                    <input type="submit" role="button" class="btn btn-primary btn-save" value="Save"/>
                                                </div>
                                                <div class="clearfix"></div>
                                            </form>
                                        </div>
                                    </div>
                                    <form id="update-event-details-form" method="post">
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label>Project Start Date: </label>
                                                    <div class="form-inline">
                                                        <input type="date" class="form-control start-date" name="start_date" placeholder="yyyy-dd-mm">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Project End Date: </label>
                                                    <div class="form-inline">
                                                        <input type="date" class="form-control end-date" name="end_date" placeholder="yyyy-dd-mm">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">	
                                                    <label>Event Budget:</label>
                                                    <input type="text" class="form-control event-budget" name="event_budget">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <label>Event Name</label>
                                                    <input type="text" name="event_name" class="form-control event-name">
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Event Type: <a href="#" class="new-e-t-link">New event type</a></label>	
                                                    <select class="form-control event-type-select required select" name="event_type">
                                                        <option value="">Type</option>
                                                        <?php foreach ($event_types as $event_type): ?>
                                                            <option value="<?php echo $event_type['type_id'] ?>"><?php echo $event_type['type_name'] ?></option>	
                                                        <?php endforeach; ?>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">	
                                                    <label>Event Budget: <a href="#expenses-tab" data-toggle="tab">Estimated Cost</a></label>
                                                    <div class="input-group">
                                                        <span class="input-group-addon">P</span>
                                                        <input type="text" class="form-control event-budget" name="event_budget">
                                                        <span class="input-group-addon">.00</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">		
                                            <div class="row">
                                                <div class="col-md-5">	
                                                    <label>Client Name:<a href="#" class="new-e-c-link"> New client</a></label>
                                                    <select class="form-control client-select" name="client">
                                                        <option value="">Client</option>	
                                                        <?php foreach ($clients as $client): ?>
                                                            <option value="<?php echo $client['client_id'] ?>"><?php echo $client['name'] ?></option>
                                                        <?php endforeach; ?>
                                                    </select>
                                                </div>
                                                <div class="col-md-7">
                                                    <div class="col-md-12">
                                                        <label>Event Actual Date: </label>
                                                    </div>
                                                    <div class="form-inline">
                                                        <div class="col-md-7">
                                                            <input type="date" class="form-control actual-date" name="actual_date" placeholder="yyyy-mm-dd">
                                                        </div>
                                                        <div class="actual-time">
                                                            <div class="form-group col-md-2">
                                                                <select class="form-control a-hr required select" name="a_hr">
                                                                    <option class="default-hr" value="">HR</option>
                                                                    <?php $a_hr = 1;
                                                                    while ($a_hr != 25) {
                                                                        ?>
                                                                        <?php if (strlen($a_hr) == 1) { ?>
                                                                            <option value="0<?php echo $a_hr ?>">0<?php echo $a_hr ?></option>
                                                                        <?php } else { ?>
                                                                            <option value="<?php echo $a_hr ?>"><?php echo $a_hr ?></option>
                                                                        <?php } ?>
                                                                        <?php $a_hr++;
                                                                    }
                                                                    ?>
                                                                </select>
                                                            </div>
                                                            <div class="col-md-1 text-center">
                                                                <label>:</label>
                                                            </div>
                                                            <div class="form-group col-md-2">
                                                                <select class="form-control a-min required select" name="a_min">
                                                                    <option class="default-min" value="">MM</option>
                                                                    <?php $a_min = 0;
                                                                    while ($a_min != 60) {
                                                                        ?>
                                                                        <?php if (strlen($a_min) == 1) { ?>
                                                                            <option value="0<?php echo $a_min ?>">0<?php echo $a_min ?></option>
                                                                        <?php } else { ?>
                                                                            <option value="<?php echo $a_min ?>"><?php echo $a_min ?></option>
        <?php } ?>
        <?php $a_min+=10;
    }
    ?>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>				
                                        <div class="form-group">
                                            <label>Event Location/s:<a href="#" class="new-e-v-link"> New venue</a></label>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">Check the venue/s that you like</div>
                                                <div class="panel-body venue-panel">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>Event Coordinator:<a href="#" class="new-e-e-link"> New coordinator</a></label>
                                            <select class="form-control coordinator-select" name="coordinator">
                                                <option>Coordinator</option>	
    <?php foreach ($coords as $coord): ?>
                                                    <option value="<?php echo $coord['coordinator_id'] ?>"><?php echo $coord['name'] ?></option>
    <?php endforeach; ?>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label> Event Notes: </label>
                                            <textarea class="form-control event-desc" rows="4" name="event-desc"></textarea>
                                        </div>
                                        <input type="submit" role="button" class="btn btn-primary pull-right btn-update" value="Update">
                                    </form>
                                </div>
<?php } ?>
                            <div class="clearfix"></div>
                        </div>
                        <!--Event Supplier-->
                        <div class="tab-pane" id="view-event-supplier-tab">
                            <div class="row">
                                <form id="assign-e-s-form" method="post" class="input-group col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 1em;">
                                    <select class="form-control exsiting-supplier select required" name="event_supplier">
                                        <option value="" class="default-value">Supplier</option>
                                        <?php
                                        if ($supplier != FALSE) {
                                            foreach ($supplier as $item) {
                                                echo '<option value="' . $item['supplier_id'] . '">' .
                                                $item['company'] . '</option>';
                                            }
                                        }
                                        ?>
                                    </select>
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-default assign-supplier" title="Assign supplier for the event"><span class="glyphicon glyphicon-plus"></span></button>
                                    </span>
                                </form>
                            </div>
                            <div class="assigned-event-supplier-container">
                                <form id="services-form" class="row" method="post">
                                    <input type="hidden" id="supplier-id" />
                                    <div class="input-group col-md-6">
                                        <input type="text" class="form-control service-name" name="service" placeholder="New Services...">
                                        <span class="input-group-btn">
                                            <button type="submit" class="btn btn-default btn-new-service" title="Add new service"><span class="glyphicon glyphicon-plus"></span></button>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--Event Checklist-->
                        <div class="tab-pane margin-top" id="view-event-checklist-tab">
<?php if ($eve[0] == 0) { ?>
                                <button class="btn btn-primary btn-new-checklist-item" style="margin-bottom: 1em;">
                                    <span class="glyphicon glyphicon-plus"></span> New Checklist Item</button>
                                <div class="panel panel-primary checklist-panel hide">
                                    <div class="panel-heading">
                                        New Checklist Item
                                    </div>
                                    <div class="panel-body">
                                        <form id="new-checklist-item-form" method="post">
                                            <div class="row">
                                                <label class="col-md-2 col-sm-1">Select category</label>
                                                <div class="col-md-10 col-sm-11">
                                                    <select class="form-control category-select" name="category">
                                                        <option class="default-val" value="">Category</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row checklist-item-container margin-top hide">
                                                <label class="col-md-2 col-sm-1">Checklist Item</label>
                                                <div class="col-md-10 col-sm-11">
                                                    <select class="form-control checklist-select required select" name="checklist_item">
                                                        <option class="default-val" value="">Item</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="pull-right margin-top">
                                                <button type="button" class="btn btn-default btn-cancel">Cancel</button>
                                                <button type="submit" class="btn btn-primary btn-save" disabled>Save</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
<?php } ?>
                            <div class="checklist-list"></div>
                        </div>
                        <!--Event Task-->
                        <div class="tab-pane margin-top" id="view-task-tab">
                            <button class="btn btn-primary btn-new-task" style="margin-bottom: 1em;">
                                <span class="glyphicon glyphicon-plus"></span> New Task</button>
                            <div class="panel panel-primary hide task-container">
                                <div class="panel-heading">
                                    New Task
                                </div>
                                <div class="panel-body">
                                    <form id="task-form" method="post">
                                        <div class="row">
                                            <label for="task-desc" class="col-sm-2 control-label">Task</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control task-desc" name="task_desc" style="max-width: 100%">
                                                </textarea>
                                            </div>
                                        </div>
                                        <div class="row margin-top">
                                            <div class="col-md-2">
                                                <label>Date and Time: </label>
                                            </div>
                                            <div class="form-inline">
                                                <div class="col-md-5">
                                                    <input type="date" class="form-control task-date" name="task_date" placeholder="yyyy-mm-dd">
                                                </div>
                                                <div class="task-date">
                                                    <div class="form-group col-md-2">
                                                        <select class="form-control task-hr required select" name="task_hr">
                                                            <option class="default-hr" value="">HR</option>
                                                            <?php $task_hr = 1;
                                                            while ($task_hr != 25) {
                                                                ?>
                                                                <?php if (strlen($task_hr) == 1) { ?>
                                                                    <option value="0<?php echo $task_hr ?>">0<?php echo $task_hr ?></option>
    <?php } else { ?>
                                                                    <option value="<?php echo $task_hr ?>"><?php echo $task_hr ?></option>
    <?php } ?>
    <?php $task_hr++;
}
?>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-1 text-center">
                                                        <label>:</label>
                                                    </div>
                                                    <div class="form-group col-md-2">
                                                        <select class="form-control task-min required select" name="task_min">
                                                            <option class="default-min" value="">MM</option>
                                                            <?php $a_min = 0;
                                                            while ($a_min != 60) {
                                                                ?>
    <?php if (strlen($a_min) == 1) { ?>
                                                                    <option value="0<?php echo $a_min ?>">0<?php echo $a_min ?></option>
    <?php } else { ?>
                                                                    <option value="<?php echo $a_min ?>"><?php echo $a_min ?></option>
    <?php } ?>
    <?php $a_min+=10;
}
?>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pull-right margin-top">
                                            <button type="button" class="btn btn-default btn-cancel">Cancel</button>
                                            <input type="submit" class="btn btn-primary btn-add" value="Add"/>
                                        </div>
                                        <div class="clearfix"></div>
                                    </form>
                                </div>
                            </div>
                            <div id="task-list"></div>
                            <div class="clearfix"></div>
                        </div>
                        <!--Venue Layout-->
                        <div class="tab-pane" id="venue-tab">
                            <div
                                id="main-toolbar">
                                <button id="single-floor" class="btn btn-default col-sm-offset-1" title="single floor"><span class="glyphicon glyphicon-bell"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="upload-main-layout-bg" class="btn btn-default" title="upload image"><span class="glyphicon glyphicon-picture"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="floor-draw" class="btn btn-default disabled" title="draw floor"><span class="glyphicon glyphicon-pencil"></span></button>
                                <button id="finish-draw" class="btn btn-default disabled" title="finish draw"><span class="glyphicon glyphicon-ok"></span></button>
                                <button id="remove-floor" class="btn btn-default" title="remove floor"><span class="glyphicon glyphicon-remove"></span></button>
                                <button id="cancel-remove" class="btn btn-default disabled" title="cancel removing"><span class="glyphicon glyphicon-remove-circle"></span></button>
                                <button id="show-floors" class="btn btn-default disabled" title="show drawn floors"><span class="glyphicon glyphicon-eye-open"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="edit-label" class="btn btn-default" title="save layout"><span class="glyphicon glyphicon-pushpin"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button class="btn btn-default disabled" title="clear all"><span class="glyphicon glyphicon-trash"></span></button>
                                <button id="save-floor" class="btn btn-default" title="save layout"><span class="glyphicon glyphicon-floppy-save"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>

                                <form id="ven" method="post" enctype="multipart/form-data">
                                    <input id="ev-id" type="text" name="ev-id" class="hide"/>
                                    <input id="img-url" type="text" name="img-url" class="hide"/>
                                    <textarea id="imgData" name="imgData" class="hide"></textarea>
                                    <input id="main-layout-img" class="hide" type="file" name="main-layout-img"/>
                                </form>
                            </div>
                            <div id="venue-main-container">
                                <div id="venue-main-details">
                                    <input id="floor-label" class="form-control hide" type="text" name="floor-label" placeholder="input floor label here"/>
                                    <textarea id="floor-desc" class="form-control hide" name="floor-desc" placeholder="insert description here"></textarea>
                                    <button id="label-save" class="btn btn-default pull-right hide" title="save layout"><span class="glyphicon glyphicon-floppy-save"></span></button>
                                    <h1 id="displayed-label" class="hide"></h1>
                                    <p id="displayed-desc" class="hide">description</p>
                                </div>
                                <div id="venue-main-working-area"></div>
                            </div>
                            <div id="reload-main-toolbar" class="hide">
                                <button id="reload-floor-draw" class="btn btn-default col-sm-offset-1 disabled" title="draw floor"><span class="glyphicon glyphicon-pencil"></span></button>
                                <button id="reload-finish-draw" class="btn btn-default disabled" title="finish draw"><span class="glyphicon glyphicon-ok"></span></button>
                                <button id="reload-remove-floor" class="btn btn-default" title="remove floor"><span class="glyphicon glyphicon-remove"></span></button>
                                <button id="reload-cancel-remove" class="btn btn-default disabled" title="cancel removing"><span class="glyphicon glyphicon-remove-circle"></span></button>
                                <button id="reload-show-floors" class="btn btn-default" title="show drawn floors"><span class="glyphicon glyphicon-eye-open"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="reload-edit-label" class="btn btn-default" title="save layout"><span class="glyphicon glyphicon-pushpin"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button class="btn btn-default disabled" title="clear all"><span class="glyphicon glyphicon-trash"></span></button>
                                <button id="reload-save-floor" class="btn btn-default disabled" title="save layout"><span class="glyphicon glyphicon-floppy-save"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>

                                <form id="ven" method="post" enctype="multipart/form-data">
                                    <input id="ev-id" type="text" name="ev-id" class="hide"/>
                                    <input id="img-url" type="text" name="img-url" class="hide"/>
                                    <textarea id="imgData" name="imgData" class="hide"></textarea>
                                    <input id="main-layout-img" class="hide" type="file" name="main-layout-img"/>
                                </form>
                            </div>
                            <div id="reload-venue-main-container">
                                <div id="reload-venue-main-details">
                                    <input id="reload-floor-label" class="form-control hide" type="text" name="floor-label" placeholder="input floor label here"/>
                                    <textarea id="reload-floor-desc" class="form-control hide" name="floor-desc" placeholder="insert description here"></textarea>
                                    <button id="reload-label-save" class="btn btn-default pull-right hide" title="save layout"><span class="glyphicon glyphicon-floppy-save"></span></button>
                                    <h1 id="reload-displayed-label" class="hide"></h1>
                                    <p id="reload-displayed-desc" class="hide"></p>
                                </div>
                                <div id="reload-venue-main-working-area"></div>
                            </div>
                            <div id="sub-toolbar" class="hide">
                                <button id="draw-rect" class="btn btn-default col-xs-offset-1" title="room"><span class="glyphicon glyphicon-book"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="rotate-image" class="btn btn-default" title="rotate"><span class="glyphicon glyphicon-repeat"></span></button>
                                <input id="rotate-degrees" disabled type="text" style="width:40px;"/>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="remove-img" class="btn btn-default" title="remove floor"><span class="glyphicon glyphicon-remove"></span></button>
                                <button id="cancel-remove-img" class="btn btn-default disabled" title="cancel removing"><span class="glyphicon glyphicon-remove-circle"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="move-to-top" class="btn btn-default" title="move to top"><span></span>mT</button>
                                <button id="move-to-bottom" class="btn btn-default" title="move to bottom"><span></span>mB</button>
                                <button id="move-up" class="btn btn-default" title="move up"><span></span>mU</button>
                                <button id="move-down" class="btn btn-default" title="move down"><span></span>mD</button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button class="btn btn-default disabled"><span class="glyphicon glyphicon-comment"></span></button>
                                <button id="save-back-layout" class="btn btn-default col-md-offset-3"><span>&larr; Back</span></button>
                            </div>
                            <div id="venue-sub-container">
                                <input id="sub-layout-id" name="sub-layout-id" type="text" class="hide"/>
                                <textarea id="subData" name="subData" class="hide"></textarea>
                                <div id="tool-img-con">
                                    <select id="tool-type" class="form-control">
                                        <?php
                                        foreach ($drag_category->result() as $row) {
                                            echo "<option value=" . $row->drag_category_id . ">" . $row->drag_category_name . "</option>";
                                        }
                                        ?>   
                                    </select>
                                    <div id="img-con"></div>
                                </div>                     
                                <div id="venue-sub-working-area"></div>
                                <div style="clear: both;"></div>
                            </div>
                            <div id="reload-sub-toolbar" class="hide">
                                <button class="btn btn-default col-xs-offset-1 disabled" title="room"><span class="glyphicon glyphicon-roundabout"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button class="btn btn-default disabled" title="rotate"><span class="glyphicon glyphicon-repeat"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="reload-remove-img" class="btn btn-default disabled" title="remove floor"><span class="glyphicon glyphicon-remove"></span></button>
                                <button id="reload-cancel-remove-img" class="btn btn-default disabled" title="cancel removing"><span class="glyphicon glyphicon-remove-circle"></span></button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button id="move-to-top" class="btn btn-default disabled" title="move to top"><span></span>mT</button>
                                <button id="move-to-bottom" class="btn btn-default disabled" title="move to bottom"><span></span>mB</button>
                                <button id="move-up" class="btn btn-default disabled" title="move up"><span></span>mU</button>
                                <button id="move-down" class="btn btn-default disabled" title="move down"><span></span>mD</button>
                                <span>&nbsp; &nbsp; &nbsp;</span>
                                <button class="btn btn-default disabled"><span class="glyphicon glyphicon-comment"></span></button>
                                <button id="update-back-layout" class="btn btn-default col-md-offset-3"><span>&larr; Back</span></button>
                            </div>
                            <div id="reload-venue-sub-container">
                                <input id="reload-sub-layout-id" name="sub-layout-id" type="text" class="hide"/>
                                <textarea id="reload-subData" name="reload-subData" class="hide"></textarea>
                                <div id="reload-tool-img-con">
                                    <select id="reload-tool-type" class="form-control">
                                        <?php
                                        foreach ($drag_category->result() as $row) {
                                            echo "<option value=" . $row->drag_category_id . ">" . $row->drag_category_name . "</option>";
                                        }
                                        ?>   
                                    </select>
                                    <div id="reload-img-con"></div>

                                </div>                     
                                <div id="reload-venue-sub-working-area"></div>
                                <div style="clear: both;"></div>
                            </div>
                        </div><!--end of Venue-tab-->

                        <!--Production Schedule-->
                        <div class="tab-pane" id="schedule-tab">
                            <button id="new-schedule-btn" class="btn btn-primary hide">
                                <span class="glyphicon glyphicon-plus-sign"></span>
                                Create Schedule
                            </button>
                            <button id="update-schedule-btn" class="btn btn-primary hide">
                                <span class="glyphicon glyphicon-edit"></span>
                                Update Schedule
                            </button>
                            <button id="export-schedule-btn" class="btn btn-primary hide">
                                <span class="glyphicon glyphicon-export"></span>
                                Export to Excel
                            </button>
                            <button id="pdf-schedule-btn" class="btn btn-primary hide">
                                <span class="glyphicon glyphicon-export"></span>
                                Export to PDF
                            </button>
                            <hr/>
                            <div id="schedule-container">
                            </div>
                            <div id="sched-export">
                                <div id="toexportSched"> 
                                </div>                                
                            </div>
                            <div id="sched-con">
                                <div id="new-schedule-form" class="hide">           
                                    <div>
                                        <div id="new-area">
                                            <textarea  id="description-area" class="textarea" name="description-area"> </textarea>                                                             
                                        </div>
                                        <div>                          
                                            <button type="button" class="btn btn-primary btn-save">Save</button>
                                            <button type="button" class="btn btn-default btn-cancel">Close</button>
                                        </div>
                                    </div>
                                </div><!-- /new div -->

                                <div  id="edit-schedule-form" class="hide">
                                    <div>
                                        <div id="update-area">
                                            <textarea id="description-update-area" class="textarea" name="description-update-area"> </textarea>
                                        </div>
                                        <div class="margin-top">
                                            <button type="button" class="btn btn-primary btn-save">Update changes</button>
                                            <button type="button" class="btn btn-default btn-cancel">Close</button>
                                        </div>
                                    </div>
                                </div><!-- /edit div -->
                            </div>
                        </div><!--end of Schedule tab-->

                        <!--GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANNNNNNNNNNNNNNNNNNNNNNNNNNNTTTTTTTTTTTTTTTTTTTTTTTTT CHART-->
                        <div class="tab-pane" id="gantt-chart-tab">

                             <div id="workSpace" style="padding:0px; overflow-y:auto; overflow-x:hidden;border:1px solid #e5e5e5;position:relative;margin:0 5px"></div>

                             <div id="taZone" style="display:none;" class="noprint">
                               <textarea rows="8" cols="150" id="ta">
                                 {"tasks":[
                                 {"id":-1,"name":"Gantt Chart","code":"","level":0,"status":"STATUS_ACTIVE","start":1346623200000,"duration":16,"end":1348523999999,"startIsMilestone":true,"endIsMilestone":false,"assigs":[]}
                                 ],"selectedRow":0,"deletedTaskIds":[],"canWrite":true,"canWriteOnParent":true }
                               </textarea>
                               <button onclick="loadGanttFromServer();">load</button>
                             </div>

                             <style>

                               body {
                                 overflow: hidden;
                               }
                             </style>

                             <form id="gimmeBack" style="display:none;" action="../gimmeBack.jsp" method="post" target="_blank"><input type="hidden" name="prj" id="gimBaPrj"></form>

                             <div id="gantEditorTemplates" style="display:none;">
                               <div class="__template__" type="GANTBUTTONS">
                               <div class="ganttButtonBar noprint">
                                 <div class="buttons">
                                 <button onclick="$('#workSpace').trigger('undo.gantt');" class="button textual" title="undo"><span class="glyphicon glyphicon-arrow-left"></span></button>
                                 <button onclick="$('#workSpace').trigger('redo.gantt');" class="button textual" title="redo"><span class="glyphicon glyphicon-share-alt"></span></button>
                                 <span class="ganttButtonSeparator"></span>
                                 <button onclick="$('#workSpace').trigger('addAboveCurrentTask.gantt');" class="button textual" title="insert above"><span class="glyphicon glyphicon-chevron-up"></span></button>
                                 <button onclick="$('#workSpace').trigger('addBelowCurrentTask.gantt');" class="button textual" title="insert below"><span class="glyphicon glyphicon-chevron-down"></span></button>
                                 <span class="ganttButtonSeparator"></span>
                                 <button onclick="$('#workSpace').trigger('indentCurrentTask.gantt');" class="button textual" title="indent task"><span class="glyphicon  glyphicon-arrow-right"></span></button>
                                 <button onclick="$('#workSpace').trigger('outdentCurrentTask.gantt');" class="button textual" title="unindent task"><span class="glyphicon glyphicon-arrow-left"></span></button>
                                 <span class="ganttButtonSeparator"></span>
                                 <button onclick="$('#workSpace').trigger('moveUpCurrentTask.gantt');" class="button textual" title="move up"><span class="glyphicon glyphicon glyphicon-arrow-up"></span></button>
                                 <button onclick="$('#workSpace').trigger('moveDownCurrentTask.gantt');" class="button textual" title="move down"><span class="glyphicon glyphicon-arrow-down"></span></button>
                                 <span class="ganttButtonSeparator"></span>
                                 <button onclick="$('#workSpace').trigger('zoomMinus.gantt');" class="button textual" title="zoom out"><span class="glyphicon glyphicon-zoom-out"></span></button>
                                 <button onclick="$('#workSpace').trigger('zoomPlus.gantt');" class="button textual" title="zoom in"><span class="glyphicon glyphicon-zoom-in"></span></button>
                                 <span class="ganttButtonSeparator"></span>
                                 <button onclick="$('#workSpace').trigger('deleteCurrentTask.gantt');" class="button textual" title="delete"><span class="glyphicon glyphicon glyphicon-trash"></span></button>
                                   &nbsp; &nbsp; &nbsp; &nbsp;
                                   <button onclick="saveGanttOnServer();" class="btn btn-success" title="save">save</button>
                                   <button onclick="clearGantt();" class="btn btn-warning" title="clear">clear</button>
                                   <button onclick="saveGanttOnServer();" class="btn btn-info" title="export">export</button>
                                 </div>
                                  </div>
                               </div>

                               <div class="__template__" type="TASKSEDITHEAD"><!--
                               <table class="gdfTable" cellspacing="0" cellpadding="0">
                                 <thead>
                                 <tr style="height:40px">
                                   <th class="gdfColHeader" style="width:35px;"></th>
                                   <th class="gdfColHeader" style="width:25px;"></th>
                                   <th class="gdfColHeader gdfResizable" style="width:30px;">code/short name</th>
                                   <th class="gdfColHeader gdfResizable" style="width:10px;"></th>
                                   <th class="gdfColHeader gdfResizable" style="width:200px;">name</th>
                                   <th class="gdfColHeader gdfResizable" style="width:80px;">start</th>
                                   <th class="gdfColHeader gdfResizable" style="width:80px;">end</th>
                                   <th class="gdfColHeader gdfResizable" style="width:50px;">dur.</th>
                                   <th class="gdfColHeader gdfResizable" style="width:50px;">dep.</th>
                                   <th class="gdfColHeader gdfResizable" style="width:200px;">assignees</th>
                                 </tr>
                                 </thead>
                               </table>
                               --></div>

                               <div class="__template__" type="TASKROW"><!--
                               <tr taskId="(#=obj.id#)" class="taskEditRow" level="(#=level#)">
                                 <th class="gdfCell edit" align="right" style="cursor:pointer;"><span class="taskRowIndex">(#=obj.getRow()+1#)</span> <span class="teamworkIcon" style="font-size:12px;" >e</span></th>
                                 <td class="gdfCell" align="center"><div class="taskStatus cvcColorSquare" status="(#=obj.status#)"></div></td>
                                 <td class="gdfCell"><input type="text" name="code" value="(#=obj.code?obj.code:''#)"></td>
                                 <td class="gdfCell"><span>-</span></td>

                                 <td class="gdfCell indentCell" style="padding-left:(#=obj.level*10#)px;"><input type="text" name="name" value="(#=obj.name#)" style="(#=obj.level>0?'border-left:2px dotted orange':''#)"></td>

                                 <td class="gdfCell"><input type="text" name="start"  value="" class="date"></td>
                                 <td class="gdfCell"><input type="text" name="end" value="" class="date"></td>
                                 <td class="gdfCell"><input type="text" name="duration" value="(#=obj.duration#)"></td>
                                 <td class="gdfCell"><input type="text" name="depends" value="(#=obj.depends#)" (#=obj.hasExternalDep?"readonly":""#)></td>
                                 <td class="gdfCell taskAssigs">(#=obj.getAssigsString()#)</td>
                               </tr>
                               --></div>

                               <div class="__template__" type="TASKEMPTYROW"><!--
                               <tr class="taskEditRow emptyRow" >
                                 <th class="gdfCell" align="right"></th>
                                 <td class="gdfCell" align="center"></td>
                                 <td class="gdfCell"></td>
                                 <td class="gdfCell"></td>
                                 <td class="gdfCell"></td>
                                 <td class="gdfCell"></td>
                                 <td class="gdfCell"></td>
                                 <td class="gdfCell"></td>
                                 <td class="gdfCell"></td>
                               </tr>
                               --></div>

                               <div class="__template__" type="TASKBAR"><!--
                               <div class="taskBox" taskId="(#=obj.id#)" >
                                 <div class="layout (#=obj.hasExternalDep?'extDep':''#)">
                                   <div class="taskStatus" status="(#=obj.status#)"></div>
                                   <div class="taskProgress" style="width:(#=obj.progress>100?100:obj.progress#)%; background-color:(#=obj.progress>100?'red':'rgb(153,255,51);'#);"></div>
                                   <div class="milestone (#=obj.startIsMilestone?'active':''#)" ></div>

                                   <div class="taskLabel"></div>
                                   <div class="milestone end (#=obj.endIsMilestone?'active':''#)" ></div>
                                 </div>
                               </div>
                               --></div>


                               <div class="__template__" type="CHANGE_STATUS"><!--
                                 <div class="taskStatusBox">
                                   <div class="taskStatus cvcColorSquare" status="STATUS_ACTIVE" title="active"></div>
                                   <div class="taskStatus cvcColorSquare" status="STATUS_DONE" title="completed"></div>
                                   <div class="taskStatus cvcColorSquare" status="STATUS_FAILED" title="failed"></div>
                                   <div class="taskStatus cvcColorSquare" status="STATUS_SUSPENDED" title="suspended"></div>
                                   <div class="taskStatus cvcColorSquare" status="STATUS_UNDEFINED" title="undefined"></div>
                                 </div>
                               --></div>


                               <div class="__template__" type="TASK_EDITOR"><!--
                               <div class="ganttTaskEditor">
                               <table width="100%">
                                 <tr>
                                   <td>
                                     <table cellpadding="5">
                                       <tr>
                                         <td><label for="code">code/short name</label><br><input type="text" name="code" id="code" value="" class="formElements"></td>
                                        </tr><tr>
                                         <td><label for="name">name</label><br><input type="text" name="name" id="name" value=""  size="35" class="formElements"></td>
                                       </tr>
                                       <tr></tr>
                                         <td>
                                           <label for="description">description</label><br>
                                           <textarea rows="5" cols="30" id="description" name="description" class="formElements"></textarea>
                                         </td>
                                       </tr>
                                     </table>
                                   </td>
                                   <td valign="top">
                                     <table cellpadding="5">
                                       <tr>
                                       <td colspan="2"><label for="status">status</label><br><div id="status" class="taskStatus" status=""></div></td>
                                       <tr>
                                       <td colspan="2"><label for="progress">progress</label><br><input type="text" name="progress" id="progress" value="" size="3" class="formElements"></td>
                                       </tr>
                                       <tr>
                                       <td><label for="start">start</label><br><input type="text" name="start" id="start"  value="" class="date" size="10" class="formElements"><input type="checkbox" id="startIsMilestone"> </td>
                                       <td rowspan="2" class="graph" style="padding-left:50px"><label for="duration">dur.</label><br><input type="text" name="duration" id="duration" value=""  size="5" class="formElements"></td>
                                     </tr><tr>
                                       <td><label for="end">end</label><br><input type="text" name="end" id="end" value="" class="date"  size="10" class="formElements"><input type="checkbox" id="endIsMilestone"></td>
                                     </table>
                                   </td>
                                 </tr>
                                 </table>

                                 <h2>assignments</h2>
                               <table  cellspacing="1" cellpadding="0" width="100%" id="assigsTable">
                                 <tr>
                                   <th style="width:100px;">name</th>
                                   <th style="width:70px;">role</th>
                                   <th style="width:30px;">est.wklg.</th>
                                   <th style="width:30px;" id="addAssig"><span class="teamworkIcon" style="cursor: pointer">+</span></th>
                                 </tr>
                               </table>

                               <div style="text-align: right; padding-top: 20px"><button id="saveButton" class="button big">save</button></div>
                               </div>
                               --></div>


                               <div class="__template__" type="ASSIGNMENT_ROW"><!--
                               <tr taskId="(#=obj.task.id#)" assigId="(#=obj.assig.id#)" class="assigEditRow" >
                                 <td ><select name="resourceId"  class="formElements" (#=obj.assig.id.indexOf("tmp_")==0?"":"disabled"#) ></select></td>
                                 <td ><select type="select" name="roleId"  class="formElements"></select></td>
                                 <td ><input type="text" name="effort" value="(#=getMillisInHoursMinutes(obj.assig.effort)#)" size="5" class="formElements"></td>
                                 <td align="center"><span class="teamworkIcon delAssig" style="cursor: pointer">d</span></td>
                               </tr>
                               --></div>

                             </div>
                        </div><!--end of Gantt Chart tab -->
                        <div class="tab-pane" id="expenses-tab">
                            <div class="row">
                                <div class="col-md-5">

                                </div>
                                <div class="col-md-2">
                                    <label>Budget (Php) </label>
                                    <input type="text" class="form-control money" id="estimated-budget">
                                </div>
                                <div class="col-md-2">
                                    <label>Total Expense (Php) </label>
                                    <input type="text" class="form-control money" id="total-exp-amount">
                                </div>
                                <div class="col-md-2">
                                    <label>Balance (Php) </label>
                                    <input type="text" class="form-control money" id="bal">
                                </div>
                                <div class="col-md-1">

                                </div>
                            </div>

                            <div class="margin-bottom">
                                <div class="dropdown btn-group">
                                    <button id="add-exp-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="glyphicon glyphicon-plus-sign"></span>
                                        Add Expense
                                    </button>
                                    <ul class="dropdown-menu size well" id="add-exp-drop">
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>Item</label>
                                                <input type="text" class="form-control" name="exp_item" id="exp-item">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Particulars</label>
                                                <input type="text" class="form-control" name="particulars" id="particulars">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>Estimated Amount</label>
                                                <input type="text" class="form-control" name="estimated_amount" id="estimated-amount">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Actual Amount</label>
                                                <input type="text" class="form-control" name="actual_amount" id="actual-amount">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>
                                                    <input type="checkbox" value="" name="exp_cheque" id="exp-cheque">
                                                    Cheque
                                                </label>
                                            </div>
                                            <div class="form-group col-md-6" id="exp-chq-form">
                                                <label>Cheque No.</label>
                                                <input type="text" class="form-control" name="exp_chq_no" id="exp-chq-no">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>Receipt No.</label>
                                                <input type="text" class="form-control" name="receipt_num" id="receipt-num">
                                            </div>
                                            <div class="form-group  col-md-6">
                                                <label>Purchase Date</label>
                                                <input type="date" class="form-control" name="purchase_date" id="purchase-date">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Remarks</label>
                                            <textarea class="form-control" name="remarks" id="remarks"></textarea>
                                        </div>
                                        <div class="center">
                                            <button type="button" class="btn btn-default exp-btn">Cancel</button>
                                            <button type="button" class="btn btn-primary save-exp exp-btn">Next</button>
                                            <button type="button" class="btn btn-primary save-exp exp-btn">Save</button>
                                        </div>
                                    </ul>
                                </div>

                                <button id="export-expense" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-export"></span>
                                    Export Table
                                </button>
                            </div>

                            <div class="table-responsive">
                                <table id="expense-table" class="table table-hover table-responsive table-bordered">
                                    <thead>  
                                        <tr>
                                            <th></th>
                                            <th class="center col-md-1">Item</th>
                                            <th class="center col-md-1">Particulars</th>
                                            <th class="center col-md-1">Estimated Amount</th>
                                            <th class="center col-md-1">Actual Amount</th>
                                            <th class="center col-md-2">Receipt No.</th>
                                            <th class="center col-md-1">Date</th>
                                            <th class="center col-md-1">Cheque</th>
                                            <th class="center col-md-4">Remarks</th>     
                                        </tr>  
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table> 
                            </div>

                            <div id="exp-export">
                                <div id="exp-export-table" class="hide">
                                </div>
                            </div>
                        </div><!--end of Expenses tab -->
                        <!--Voucher Tab-->
                        <div class="tab-pane" id="voucher-tab">
                            <div class="row">
                                <div class="col-md-10">
                                </div>
                                <div class="col-md-2">
                                    <label>Total (Php) </label>
                                    <input type="text" class="form-control money" id="total-cv-amount">
                                </div>
                            </div>

                            <div class="margin-bottom">
                                <div class="dropdown btn-group">
                                    <button id="add-cv-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="glyphicon glyphicon-plus-sign"></span>
                                        Add Cash Voucher
                                    </button>
                                    <ul class="dropdown-menu size well" id="add-cv-drop">
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label>Voucher ID</label>
                                                <input type="text" class="form-control" name="cv_num" id="cv-num">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Description</label>
                                                <input type="text" class="form-control" name="cv_desc" id="cv-desc">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-5">
                                                <label>Amount</label>
                                                <input type="text" class="form-control" name="cv_amount" id="cv-amount">
                                            </div>
                                            <div class="form-group col-md-2">
                                                <label>
                                                    <input type="checkbox" value="" name="cv_cheque" id="cv-cheque">
                                                    Cheque
                                                </label>
                                            </div>
                                            <div class="form-group col-md-5" id="cv-chq-form">
                                                <label>Cheque No.</label>
                                                <input type="text" class="form-control" name="cv_chq_no" id="cv-chq-no">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label>Remarks</label>
                                            <textarea class="form-control" name="cv_remarks" id="cv-remarks"></textarea>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-3">
                                                <label>Status</label>
                                                <select class="form-control" name="cv_status" id="cv-status">
                                                    <option>Not Paid</option>
                                                    <option>Paid</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="center">
                                            <button type="button" class="btn btn-default cv-btn">Cancel</button>
                                            <button type="button" class="btn btn-primary save-cv">Next</button>
                                            <button type="button" class="btn btn-primary save-cv cv-btn">Save</button>
                                        </div>
                                    </ul>
                                </div>
                                <button id="export-voucher" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-export"></span>
                                    Export Table
                                </button>
                            </div>

                            <div class="table-responsive">
                                <table id="voucher-table" class="table table-bordered table-hover">
                                    <thead>  
                                        <tr>
                                            <th></th>
                                            <th class="center col-md-1">CV No.</th>
                                            <th class="center col-md-3">Description</th>
                                            <th class="center col-md-2">Amount</th>
                                            <th class="center col-md-1">Cheque</th>
                                            <th class="center col-md-4">Remarks</th>
                                            <th class="center col-md-1">Status</th>
                                        </tr>  
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>

                            <div id="cv-export">
                                <div id="cv-export-table" class="hide">
                                </div>
                            </div>
                        </div><!--end of Cash Voucher tab -->

                        <div id="guest-tab" class="hide">
                            <div id="progress_bar">
                                <div  id="progressbar_con">
                                    <ul id="progress_bar">           
                                        <li id='nav-choose' class="first" class="selected">    			
                                            <div class="progress_bar_item_right" >
                                                <span class="left" >Choose<br />Design </span>
                                                <!--<div class="clear"></div>-->
                                            </div>
                                            <img src="<?php echo site_url() ?>assets/images/progressbar/arrow_left.png" class="right arrow" />
                                            <!--<div class="clear"></div>-->
                                        </li>
                                        <li id='nav-invite' class="">
                                            <img src="<?php echo site_url() ?>assets/images/progressbar/arrow_right_no_border.png" class="left arrow" />
                                            <div class="progress_bar_item_right">
                                                <span class="left">Invite<br />Guests</span>
                                                <!--<div class="clear"></div>-->
                                            </div>
                                            <img src="<?php echo site_url() ?>assets/images/progressbar/arrow_left.png" class="right arrow" />
                                            <!--<div class="clear"></div>-->
                                        </li>
                                        <li id='nav-finish'>
                                            <img src="<?php echo site_url() ?>assets/images/progressbar/arrow_right_no_border.png" class="left arrow" />

                                            <div class="progress_bar_item_right">
                                                <span class="left">Finish<br />&amp; Send</span>
                                                <!--<div class="clear"></div>-->
                                            </div>
                                            <img src="<?php echo site_url() ?>assets/images/progressbar/arrow_left.png" class="right arrow" />
                                            <!--<div class="clear"></div>-->
                                        </li>
                                        <li class="last">
                                            <img src="<?php echo site_url() ?>assets/images/progressbar/arrow_right_no_border.png" class="left arrow" />
                                            <div class="progress_bar_item_right">
                                                <span class="left"> Seat <br/> Plan</span>
                                            </div>
                                        </li>                                        
                                    </ul>
                                </div>
                            </div>
                            <div id="choose-design-con">
                                <div id="title_con">
                                    <h2 id="title">Choose Invitation Design</h2>
                                    <div id="skip_back"  class=" btn btn-info" >
                                        <a class="skip_back"  href="<?php echo site_url() ?>guest_management/enter_details" style="text-decoration: none">Skip</a>
                                    </div>
                                    <div class="clear"></div>
                                    <hr/>
                                </div>
                                <div id="invi_con">
                                    <div id="choose_invi">
                                        <div class="panel-group" id="accordion" style="height: 34%;" >
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="text-decoration-line: cancel-overline">
                                                            Choose Designs
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div id="collapseOne" class="panel-collapse collapse in" style="overflow-x: hidden; overflow-y: auto; height: 316px;">
<?php foreach ($pics->result() as $row) { ?>
                                                        <picture href="#"><img class="pic" src="<?php echo site_url() . $row->design_path; ?>"/></picture>
<?php } ?>
                                                </div>
                                            </div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                                            Upload Customize Design
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div id="collapseTwo" class="panel-collapse collapse">
                                                    <div class="panel-body" >
                                                        <form id="img-design-form" method="post" enctype="multipart/form-data">
                                                            <input id="design-type-id" type="text" name="design-type-id"/>
                                                            <input id="design-img" type="file" name="design-img"/><br/>

                                                            <span class="upload_hint">The image must be 4.5 X 6 inches.</span>
                                                            <br/>
                                                            <span class="upload_hint">Max Size: 5MB (jpg, gif, png, jpeg)</span>
                                                            <br/><br/>
                                                        </form>
                                                        <input id="submit-guest-design" type="submit" value="Upload" name="submit" class="btn btn-block btn-info"/>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="preview" ></div>
                                    <div class="clear"></div>
                                </div>
                            </div>
                            <div id='invite-guest-con' class='hide'>
                                <div id="title_con">
                                    <h2 id="title">Invite Guests</h2>
                                    <div id="skip_back"  class=" btn btn-info" >
                                        <a class="skip_back"  href="<?php echo site_url() ?>guest_management/enter_details" style="text-decoration: none">Skip</a>
                                    </div>
                                    <div class="clear"></div>
                                    <hr/>
                                </div>
                                <div class="table-responsive">
                                    <table id="guest_table"  class="table table-bordered table-hover">
                                        <thead>  
                                            <tr>  
                                                <th title="Check All" style="width: 1%;"><input type="checkbox" name="chk" class="chk" id="selectall"/></th>  
                                                <th style="width: 1%;" title="Invitation sent"><span class="glyphicon glyphicon-envelope"></span></th>  
                                                <th>Name</th>
                                                <th >Email</th>
                                                <th>Role</th>
                                                <th>RSVP</th>
                                                <th>Token</th>
                                                <th style="width: 1%; "></th>
                                            </tr>  
                                        </thead>
                                        <tfoot style="background-color: #f5f5f5 ">
                                            <tr>
                                                <th></th>
                                                <th ><input style="visibility: hidden" id="sent" type="text" class="form-control" value="" name="sent"></th>
                                                <th><input id="gname" type="text" class="form-control" value="" name="gname" placeholder="Name"></th>
                                                <th><input id="g_email" type="email" class="form-control" value="" name="g_email" placeholder="Email"></th>

                                                <th><input id="g_role" type="text" class="form-control" value="" name="grole" placeholder="Role"></th>
                                                <th><select id="rsvp" style="font-size: 1em; width: 100px " class="form-control" name="rsvp">
                                                        <option  >YES</option>
                                                        <option>MAYBE</option>
                                                    </select></th>
                                                <th><select id="rsvp" style="font-size: 1em; width: 100px " class="form-control" name="rsvp">
                                                        <option  >YES</option>
                                                        <option>MAYBE</option>
                                                    </select></th>    
                                        <input id="sent" type="hidden" name="sent" value="no"/>
                                        <th><button id="save_guest" class="btn btn-info btn-xs" title="Add guest"><span class="glyphicon glyphicon-plus"></span></button> </th>

                                        </tr>
                                        </tfoot>
                                        <tbody id='guest-list'>
                                        </tbody >
                                    </table>
                                </div>
                            </div>
                            <div id='finish-and-send-con' class='hide'>
                                <div id="title_con">
                                    <h2 id="title">Finish &amp; Send</h2>
                                    <div id="skip_back">
                                        <input id="finish-send" type="button" class=" btn btn-success"value="Finish & Send"/>
                                    </div>
                                    <div class="clear"></div>
                                    <hr/>
                                </div>
                                <div id="invitation_design">

                                    <style>
                                        #con_invi{
                                            width: 690px;
                                            border: 1px solid #000;
                                            margin: auto;
                                            padding: 15px;
                                            background-color: #d6e9c6 ;
                                            border-radius: 7px;

                                        }
                                        #inner_con_invi{
                                            width: 100%;
                                            margin: auto;
                                        }
                                        #inner_con_invi_left{
                                            border: 1px solid #ccc;
                                            min-height: 350px;
                                            float: left;	
                                            background-color: #f7f7f7;

                                        }
                                        .inner_con_invi_right{
                                            border: 1px solid #ccc;
                                            width: 100%;
                                            float: right;
                                            margin-bottom: 2%;
                                            padding: 10px;
                                            text-align: center;
                                            background-color: #f7f7f7;

                                        }
                                        #inner_con_invi_right{
                                            width: 180px;
                                            float: right;

                                        }
                                        .in_div{
                                            text-align: center;
                                            padding: 10px;
                                        }
                                        #pic{
                                            border: 1px solid #000;
                                            position: relative;
                                            width: 450px;
                                            height: 400px;
                                            clear: both;
                                            margin: auto;
                                            margin-top: 10px;
                                            margin-bottom: 20px;
                                            background-repeat: no-repeat;
                                            background-size: 80% 90%;
                                            background-position: center;
                                        }
                                        #inivitation_img{
                                            position: absolute;
                                            width: auto;
                                            height: auto;
                                            margin: auto;
                                            max-width: 400px;
                                            max-height: 400px;
                                            top: 0; right: 0; bottom: 0; left: 0;
                                        }
                                        .in_desc{
                                            border: 1px solid #ccc;
                                            width: 100%;
                                            min-height: 30px;
                                            max-height: 100%;
                                            text-align:left;
                                            margin-bottom: 2%;
                                        }
                                        .in_time_date{
                                            border: 1px solid #ccc;
                                            width: 48%;
                                            float: left;
                                            text-align:left;
                                            margin-bottom: 2%;
                                        }
                                        .in_venue{
                                            border: 1px solid #ccc;
                                            width: 48%;
                                            float: right;
                                            text-align:left;
                                            margin-bottom: 2%;	
                                        }
                                        .header{
                                            margin-top:0px;
                                            margin-bottom: 0px;
                                            border-bottom: 1px solid #ccc;
                                            background-color: #ccc;
                                            padding: 5px;
                                            font-size: 1em;
                                            font-weight: bold;
                                        }
                                        .header2{
                                            margin-top:0px;
                                            margin-bottom: 0px;
                                            border-bottom: 1px solid #ccc;
                                            font-size: 1em;
                                            font-weight: bold;
                                            background-color: #ccc;
                                            padding: 5px;
                                        }
                                        .p{
                                            font-size: .9em;
                                            padding: 5px;
                                        }
                                        .contact{
                                            font-size: 1.7em;
                                            font-weight: bold;
                                            color: green;
                                            font-family: serif;
                                        }
                                        .contact_h4{
                                            font-size: 1.2em;
                                            font-weight: bold;
                                        }
                                        .rsvp{
                                            font-size: 1.5em;
                                            font-family: serif;
                                            font-weight: bold;
                                            color: green;
                                        }
                                        .email{
                                            font-size: 1em;
                                            color: #002a80
                                        }
                                    </style>

                                    <!--<body>-->
                                    <div id="con_invi">
                                        <div id="inner_con_invi">
                                            <div id="inner_con_invi_left">
                                                <div class="in_div">
                                                    <h3 style="font-weight: bold;"><?php //echo $event_name    ?></h3>
                                                    <h4>Host By:<span style="font-weight: bold;"> <?php //echo $client_fname    ?></span></h4>
                                                    <div id="pic">
                                                        <img id="inivitation_img" src=""/>
                                                    </div>
                                                    <div class="in_desc">
                                                        <h3 class="header"> Event Description</h3>
                                                        <p class="p"><?php //echo $event_description    ?></p>
                                                    </div>
                                                    <div>
                                                        <div class="in_time_date">
                                                            <h3 class="header2"> Time and Date</h3>
                                                            <p class="p"><?php //echo $event_time    ?> <?php // echo '  :  ';    ?>  <?php //echo date('M-d, Y', strtotime($start_date))    ?></p>
                                                        </div>
                                                        <div class="in_venue">
                                                            <h3 class="header2"> Event location</h3>
                                                            <p class="p"><?php //echo $venue_name    ?> <?php // echo ' @ '    ?> <?php //echo $venue_address    ?></p>
                                                        </div>
                                                        <div style="clear:both;">
                                                        </div>
                                                    </div>
                                                    <div style="clear:both;"></div>
                                                </div>
                                            </div>
                                            <div id="inner_con_invi_right">
                                                <div class="inner_con_invi_right">
                                                    <div style="text-align: center">
                                                        <span class="rsvp"> Change RSVP</span>
                                                        <br/>
                                                        <select style="height: 30px; width: 70px; font-weight: bold; font-family:serif; font-size: 1.5em;margin-top: 10px;">
                                                            <option value="rsvp_blank"></option>
                                                            <option value="rsvp_yes">YES</option>
                                                            <option value="rsvp_no">NO</option>
                                                        </select>
                                                        <br/>
                                                        <button style="margin-top: 20px; width: 100%; height: 40px; font-size: 1.5em; font-family: serif; font-weight: bold;" type="submit" >UPDATE</button>
                                                    </div>
                                                </div>
                                                <div class="inner_con_invi_right">
                                                    <p class="p">You may call, text or email us to update your RSVP for this Event.</p>
                                                    <h3 class="contact">Contact Us:</h3>
                                                    <h4 class="contact_h4">09209514178</h4> 
                                                    <span class="email">benchbacani@yahoo.com</span>
                                                </div>
                                                <div class="inner_con_invi_right">
                                                    <p class="p">
                                                        <span>Come and visit us </span>
                                                        <a style="font-size: 1.4em; font-weight: bold; font-family: serif;" href="http://www.google.com" target="_blank" >www.bbem.com</a>
                                                    </p>
                                                </div>
                                                <div class="inner_con_invi_right">
                                                    <p class="p">
                                                        This email is customized for you. Please do not forward it.
                                                    </p>
                                                </div>
                                            </div>
                                            <div style="clear:both;"></div>
                                        </div>
                                    </div>
                                    <!--</body>-->
                                    <!--</html>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
